<template>
	<div class="nav">
		<div class="index_part_Box">
			<!--大盒子-->
			<div class="b_box">
				<ul ref="b_box_ul">
					<router-link to="/index">
						<p>首页</p>
					</router-link>
					<router-link v-if="item.typename.split('').length<=2" :to="{name:'channel',params:{tid:item.tid}}" v-for="(item,index) in navList" :key="index">
						<p>{{item.typename}}</p>
					</router-link>
					<router-link v-else :to="{name:'channel',params:{tid:item.tid}}" :key="index">
						<p>{{item.typename}}</p>
					</router-link>
					<router-link to="/zhibo">
						<p>直播</p>
					</router-link>
					<router-link to="/xiangbu">
						<p>相簿</p>
					</router-link>
				</ul>
				<div class="shangla">
					<svg class="index__icon__src-partition-zoneAll-" aria-hidden="true" @click="_shangla()">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-shouqixiao"></use>
					</svg>
				</div>
			</div>
			<!--小盒子-->
			<div class="s_box">
				<ul ref="s_box_ul">
					<router-link to="/index">
						<p>首页</p>
					</router-link>
					<router-link v-if="item.typename.split('').length<=2" v-bind:class="{active:item.tid==getCurTid}" :to="{name:'channel',params:{tid:item.tid}}" v-for="(item,index) in navList" :key="index">
						<p>{{item.typename}}</p>
					</router-link>
					<router-link v-else :to="{name:'channel',params:{tid:item.tid}}" :key="index">
						<p>{{item.typename}}</p>
					</router-link>
					<router-link to="/zhibo">
						<p>直播</p>
					</router-link>
					<router-link to="/xiangbu">
						<p>相簿</p>
					</router-link>
				</ul>
				<div class="svg_box">
					<svg class="xiala" aria-hidden="true" @click="_xiala()">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-xialaxiao"></use>
					</svg>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				navList: window.__INITIAL_STATE__.reduxAsyncConnect.partitionList[0]
			}
		},
		methods: {
			_xiala() {
				var xiala = document.querySelector(".b_box");
				xiala.classList.add("b_box_active")
			},
			_shangla() {
				var xiala = document.querySelector(".b_box");
				xiala.classList.remove("b_box_active")
			},
		},
		computed:{
			getCurTid(){
				//拿到对应键名
				return this.$store.getters.getCurTid
			}
		},
		watch:{
			//可以不用，二级里已经做了侦听
//			$route(newValue){
//			this.$store.commit("setCurTid",{
//	  				curTid:newValue.params.tid
//	  			})
//			}
		}
	}
</script>

<style lang="scss" type="text/css">
.nav{
	position: fixed;
	width: 100%;
	top: 40px;
	z-index: 99;
	background: white;
	.index_part_Box {
		z-index: 22;
		position: relative;
		.s_box {
			z-index: 2;
			display: flex;
			ul {
				/*padding-left: 15px;*/
				line-height: 35px;
				width: 90%;
				display: flex;
				justify-content: space-between;
				font-size: 15px;
				flex-wrap: nowrap;
				overflow-x: scroll;
				&::-webkit-scrollbar {
					display: none;
				}
				a {
					height: 37px;
					color: #757575;
					flex-shrink: 0;
					text-align: center;
					width: 20%;
					p {
						display: inline-block;
					}
				}
			}
			.svg_box {
				width: 10%;
				height: 35px;
				svg {
					width: 60%;
					height: 100%;
					fill: #aaa;
				}
			}
		}
		.b_box {
			width: 100%;
			background: white;
			z-index: 1;
			position: absolute;
			transform: translateY(-100%);
			overflow: hidden;
			transition: all .5s;
			ul {
				display: flex;
				line-height: 40px;
				justify-content: space-between;
				text-align: center;
				flex-wrap: wrap;
				a {
					height: 42px;
					color: #757575;
					flex-shrink: 0;
					text-align: center;
					width: 16.6%;
					p {
						display: inline-block;
					}
				}
			}
			.shangla {
				text-align: center;
				width: 50px;
				height: 35px;
				margin: 0 auto;
				svg {
					width: 50%;
					height: 35px;
					fill: #aaa;
				}
			}
		}
	}
	
	.b_box_active {
		transform: translateY(0px) !important;
	}
	
	.router-link-active,.active {
		color: #fb7299 !important;
		p {
			&::after {
				content: "";
				display: block;
				border: 1px solid #fb7299;
				margin: 0 auto;
				width: 100%;
			}
		}
	}
}
	
</style>